<template>
  <div class="common-layout">
    <el-container>
      <el-header style="background: #fff; border-bottom: 1px #eee solid">
        <div style="line-height: 60px; width: 100px" @click="goBack" class="back">
          <el-icon size="16"><ArrowLeftBold /></el-icon>返回
        </div>
      </el-header>
      <el-container style="overflow: hidden; height: calc(100vh - 60px)">
        <el-aside width="200px">
          <Menu @submit-menu="handlerItem"></Menu>
        </el-aside>
        <el-main style="overflow-y: auto; padding: 0">
          <Subject
            :dataList="dataList"
            :typeList="typeList"
            :status="status"
            @refresh="handlerEvent"
            @search="handlerSearch"
          ></Subject>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import Menu from '@/components/client/contentManager/menu.vue'
import { useRouter } from 'vue-router'
import Subject from '@/components/client/contentManager/Subject.vue'
import { onMounted, ref } from 'vue'
import request from '@/util/request'
import { ElNotification } from 'element-plus'

const router = useRouter()

const dataList = ref([])
const typeList = ref([])
const avtiveMenu = ref(1)

const goBack = () => {
  router.go(-1)
}

const getPublished = (id) => {
  request
    .get(`/user/content/publish?status=${id}`)
    .then((res) => {
      console.log('获取成功：', res)
      dataList.value = res.data
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}

const getCollect = () => {
  request
    .get('/user/content/collect')
    .then((res) => {
      console.log('获取成功：', res)
      dataList.value = res.data
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}

const getLike = () => {
  request
    .get('/user/content/like')
    .then((res) => {
      console.log('获取成功：', res)
      dataList.value = res.data
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}
const getType = () => {
  request
    .get('/user/type/list')
    .then((res) => {
      console.log('获取成功：', res)
      typeList.value = res.data
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}
const status = ref(1)

const handlerItem = (id) => {
  if (id === 1) {
    getPublished(id)
    status.value = 1
  } else if (id === 2) {
    getPublished(id)
    status.value = 1
  } else if (id === 3) {
    getPublished(id)
    status.value = 1
  } else if (id === 4) {
    console.log(id)
    status.value = 2
    getCollect()
  } else if (id === 5) {
    console.log(id)
    status.value = 3
    getLike()
  }

  avtiveMenu.value = id
}

const handlerSearch = (form) => {
  console.log('搜索的表单', form)
  request
    .post('/user/content/search', form)
    .then((res) => {
      console.log('获取成功：', res)
      dataList.value = res.data
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}

const handlerEvent = () => {
  getPublished(avtiveMenu.value)
  getType()
}

onMounted(() => {
  getPublished(1)
  getType()
})
</script>

<style scoped>
.back:hover {
  color: #0088ff;
  cursor: pointer;
}
</style>
